<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/salaryCardList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店：">
              <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                  <el-option
                      v-for="item in shopList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="薪资单类别：">
            <el-input
              v-model="paging.title"
              placeholder="请选择"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            style="margin-left: auto"
            @click="setRow(0, 1)"
            type="primary"
            >新增</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="title" label="薪资单类别" min-width="150">
          </el-table-column>
          <el-table-column prop="code" label="薪资组成" min-width="150">
            <template slot-scope="scope">
              <span v-for="(ele, index) in scope.row.type_name" :key="index"
                >{{ ele }} ,
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="操作" width="120">
            <template slot-scope="scope">
              <span @click="setRow(scope.row, 2)" class="tab-table-text"
                >编辑</span
              >
              <span @click="setRow(scope.row, 3)" class="tab-red-text"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      paging: {
        store_id: '',
        title: "",
        page: 1,
        total: 0,
        limit: 10,
      },
      form: {
        date: "",
      },
      tableData: [],
      typeList: [],
      shopList: []
    };
  },
  created() {
    this.repairGetList();
    this.allList();
    this.homegetStore()
  },
  methods: {
    async homegetStore(){
        let {code,data} = await this.$Http.homegetStore();
        if(code){
            this.shopList = data;
        }
    },
    setRow(ele, type) {
      if (type == 1) {
        this.utils.goUrl(`/salaryCardDetails?title=新增`);
      } else if (type == 2) {
        this.utils.goUrl(`/salaryCardDetails?id=${ele.id}&title=编辑`);
      } else {
        this.$msgbox({
          title: "提示",
          message: "您确定要删除此类别吗?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "删除中...";
              let { code, data } = await this.$Http.delSalary({ id: ele.id });
              if (code) {
                this.$message.success("删除成功!");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      }
    },
    async allList() {
      let { code, data } = await this.$Http.getSalaryCate({ is_all: 1 });
      if (code) {
        this.typeList = data;
      }
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getSalaryCate(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.total = data.total;
      }
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.handleCurrentChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.price {
  ::v-deep {
    .el-input {
      width: 350px;
      margin-right: 20px;
    }
  }
}
</style>